<template>
  <div class="login hiddenScroll">
    <!--左侧图片-->
    <img class="sign-background" src="../../assets/signbackground.png" />
    <!-- 登录 -->
    <div class="login-box flex-box">
      <img class="logo" src="../../assets/title.png" alt="" />
      <div class="account-enter flex-box">
        <TextInput
          :options="{ text: '账号', placeholder: '请输入账号' }"
          @change="account.id = $event"
        ></TextInput>
        <TextInput
          :options="{ text: '密码', placeholder: '请输入密码', type: 'password' }"
          @change="account.password = $event"
          @keyup.enter="loginAccount"
        ></TextInput>
        <RouterLink class="forget" to="/forget">忘记密码</RouterLink>
        <div class="choose">
          <el-button type="primary" class="button-width" round @click="loginAccount">
            登录
          </el-button>
          <el-button type="success" class="button-width" round plain @click="noLoginEnter">
            游客模式
          </el-button>
        </div>
        <a class="sign a-dialog" @click="signVisible = true">还没有帐号？点击注册</a>
      </div>
    </div>
    <!-- 账号注册 -->
    <Sign v-if="signVisible" @close="signVisible = false"></Sign>
  </div>
</template>

<script setup>
import { login } from '@/api/login'
import TextInput from '@/components/TextInput.vue'
import Sign from '@/views/Login/components/Sign.vue'
import { useUserStore } from '@/stores'
import { ref } from 'vue'
import { RouterLink, useRouter } from 'vue-router'
import { startLoading, stopLoading } from '@/utils/loading'

const userStore = useUserStore()

const router = useRouter()

// 账号密码
const account = ref({
  id: '',
  password: '',
})

// 注册弹窗
const signVisible = ref(false)

// 登录
const loginAccount = async () => {
  //开始加载
  startLoading()
  //登录账号
  const res = (await login(account.value)).data
  //取消加载
  stopLoading()
  if (!res.success) {
    ElNotification({
      title: '错误',
      message: `${res.errorMsg}`,
      type: 'error',
    })
    return
  }
  //获取信息
  const { accessToken, refreshToken, ...baseInfo } = res.data

  // 设置基本信息
  userStore.setUser(baseInfo.id)
  // 设置token
  userStore.setAccessToken(accessToken)
  userStore.setRefreshToken(refreshToken)
  // 跳转到首页
  await router.replace('/')
}

// 游客模式
const noLoginEnter = async () => {
  await router.replace('/')
}
</script>

<style scoped less="scss">
.login {
  display: flex;
  background: linear-gradient(165deg, #f7fcf8 50%, rgb(190, 223, 209) 95%, white 100%);

  height: 100vh;
  /* 防止子元素margin越级 */
  border-top: 1px solid transparent;

  .flex-box {
    /* 设置弹性布局 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .sign-background {
    height: 100vh;
    border-radius: 15px;
  }

  .login-box {
    /* 设置宽高 */
    width: 600px;
    height: 400px;
    /* 上下外边距200px，左右居中 */
    margin: 200px auto;
    /* 设置圆角 */
    border-radius: 20px;

    .logo {
      width: 140px;
      height: 50px;
      transform: scale(0.9);
    }

    .account-enter {
      width: 100%;
      height: 300px;
      /* 设置布局间距 */
      gap: 30px;

      .choose {
        margin-top: -20px;
        display: flex;
        column-gap: 20px;
      }

      /* 忘记密码 */

      .forget {
        margin-left: 250px;
      }

      /* 注册账号 */

      .sign {
        margin: -25px 140px 0 0;
      }

      .button-width {
        width: 120px;
      }
    }
  }
}
</style>
